<template lang="pug">
    <!---头部导航--->
    div(class="page-header")
        div(class="page-header__left" )
          slot(name="left")
              span(v-if="options", 
                  :style="{color:options.noTextColor}",
                  @click.stop="trigger('no')") {{options.noText}}
              i(class="page-header__left-menu", v-else)
        div(class="page-header__title")
          slot
              div CHATS
        div(class="page-header__right" )
          slot(name="right")
            span(v-if="options", 
                :style="{color:options.yesTextColor}",
                @click.stop="trigger('yes')") {{options.yesText}}
            i(class="page-header__right-more", v-else)
</template>
<script>
export default {
  data() {
    return {
      defaultYesOrNo: {
        yesText: "确定",
        yesTextColor: "#2d8cf0",
        noText: "返回",
        noTextColor: "#ed4014"
      }
    };
  },
  props: {
    /**
     * yesOrNo模式
     */
    yesOrNo: { type: Object }
    /**
     *
     */
  },
  computed: {
    options() {
      return Object.assign(this.defaultYesOrNo, this.yesOrNo || {});
    }
  },
  methods: {
    /**
     * 触发事件
     */
    trigger(eventName) {
      this.$emit(eventName);
    }
  }
};
</script>
<style lang="less" scoped>
.page-header {
  width: 320px;
  height: 50px;
  background: rgba(255, 255, 255, 1);
  display: flex;

  &__left,
  &__right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    font-size: 12px;
    padding: 0 5px;
  }

  &__left {
    &-menu {
      width: 20px;
      height: 18px;
      background: url(../../assets/theme/NAV@2x.png) no-repeat;
      background-position: center;
      padding: 22px 20px 20px;
    }
  }

  &__title {
    display: flex;

    width: 220px;
    padding: 0 20px;
    align-items: center;
    justify-content: center;

    text-align: center;

    font-size: 14px;
    font-weight: 400;
    color: rgba(41, 41, 41, 1);
  }

  &__right {
    &-more {
      width: 20px;
      height: 18px;
      padding: 20px 20px;
      background: url(../../assets/theme/DOTS@2x.png) no-repeat;
      background-position: center;
    }
  }
}
</style>

